<script setup lang="ts">
import topNavBarVue from '@/components/topNavBar.vue';
import { getAllDep } from '@/api/consult';
import { ref, onMounted, computed } from 'vue'
import {useConsuleationStore} from '../../stores/consultation'

const store = useConsuleationStore()

// 上级科室数据
const oneDep = ref([])
onMounted(async () => {
  const res = await getAllDep()
  oneDep.value = res.data
})
// 下级科室
const twoDep = computed(() => oneDep.value[active.value]?.child)

const active = ref(0)
</script>

<template>
  <topNavBarVue title="选择科室" right-text=""/>
  <div class="consult-dep-page">
    <cp-nav-bar title="选择科室" />
    <div class="wrapper">
      <van-sidebar v-model="active">
        <van-sidebar-item v-for="item in oneDep" :key="item.id" :title="item.name" />
      </van-sidebar>
      <div class="sub-dep">
        <router-link to="/consult/illness" @click="store.setDep(item.id)" v-for="item in twoDep" :key="item.id">{{ item.name }}</router-link>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.van-sidebar {
  width: 114px;

  &-item {
    padding: 14px;
    color: var(--cp-tag);

    &--select {
      color: var(--cp-main);
      font-weight: normal;

      &::before {
        display: none;
      }
    }
  }
}

.consult-dep-page {
  padding-top: 46px;

  .wrapper {
    height: calc(100vh - 46px);
    overflow: hidden;
    display: flex;

    .sub-dep {
      flex: 1;
      height: 100%;
      overflow-y: auto;

      >a {
        display: block;
        padding: 14px 30px;
        color: var(--cp-dark);
      }
    }
  }
}</style>